<script setup>
import { ref, onMounted } from 'vue'
import { qrcodeApi, userApi } from '../api'

// 统计数据
const statistics = ref({
  totalQRCodes: 0,
  myQRCodes: 0,
  totalUsers: 0,
  recentQRCodes: []
})

// 加载状态
const loading = ref(true)
const errorMsg = ref('')

// 获取统计数据
const fetchStatistics = async () => {
  try {
    loading.value = true
    errorMsg.value = ''
    
    // 获取当前用户信息
    const userInfo = JSON.parse(localStorage.getItem('user') || '{}')
    
    // 并行获取各种统计数据
    const promises = [
      qrcodeApi.getCurrentUserQRCodes(1, 1000), // 获取我的二维码总数
      qrcodeApi.getCurrentUserQRCodes(1, 5) // 获取最近的5个二维码
    ]
    
    // 如果是管理员，还要获取全局统计
    if (userInfo.role === 'admin') {
      promises.push(
        qrcodeApi.getQRCodes(1, 1000), // 获取所有二维码总数
        userApi.getUsers(1, 1000) // 获取所有用户总数
      )
    }
    
    const results = await Promise.all(promises)
    
    // 处理结果
    statistics.value.myQRCodes = results[0].data.total || 0
    statistics.value.recentQRCodes = results[1].data.list || []
    
    if (userInfo.role === 'admin' && results.length > 2) {
      statistics.value.totalQRCodes = results[2].data.total || 0
      statistics.value.totalUsers = results[3].data.total || 0
    }
    
  } catch (error) {
    console.error('获取统计数据失败:', error)
    errorMsg.value = '获取统计数据失败: ' + (error.message || '未知错误')
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未知时间'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', { hour12: false })
}

// 获取当前用户信息
const getCurrentUser = () => {
  return JSON.parse(localStorage.getItem('user') || '{}')
}

// 组件挂载时获取数据
onMounted(() => {
  fetchStatistics()
})
</script>

<template>
  <div class="statistics">
    <div class="page-header">
      <h2>数据统计</h2>
    </div>
    
    <!-- 错误提示 -->
    <div v-if="errorMsg" class="error-message">
      {{ errorMsg }}
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner">
        <div class="spinner"></div>
        <p>加载统计数据中...</p>
      </div>
    </div>
    
    <!-- 统计内容 -->
    <div v-else class="statistics-content">
      <!-- 统计卡片 -->
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 3h18v18H3V3zm2 2v14h14V5H5zm2 2h10v10H7V7z" fill="currentColor"/>
            </svg>
          </div>
          <div class="stat-info">
            <h3>我的二维码</h3>
            <p class="stat-number">{{ statistics.myQRCodes }}</p>
          </div>
        </div>
        
        <div v-if="getCurrentUser().role === 'admin'" class="stat-card">
          <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z" fill="currentColor"/>
            </svg>
          </div>
          <div class="stat-info">
            <h3>总二维码数</h3>
            <p class="stat-number">{{ statistics.totalQRCodes }}</p>
          </div>
        </div>
        
        <div v-if="getCurrentUser().role === 'admin'" class="stat-card">
          <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" fill="currentColor"/>
            </svg>
          </div>
          <div class="stat-info">
            <h3>总用户数</h3>
            <p class="stat-number">{{ statistics.totalUsers }}</p>
          </div>
        </div>
      </div>
      
      <!-- 最近创建的二维码 -->
      <div class="recent-section">
        <h3>最近创建的二维码</h3>
        <div v-if="statistics.recentQRCodes.length === 0" class="empty-state">
          <p>暂无二维码记录</p>
        </div>
        <div v-else class="recent-list">
          <div v-for="qr in statistics.recentQRCodes" :key="qr.id" class="recent-item">
            <div class="qr-info">
              <h4>{{ qr.title }}</h4>
              <p class="qr-content">{{ qr.content }}</p>
              <p class="qr-date">创建时间: {{ formatDate(qr.createTime) }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
:root {
  --primary-color: #667eea;
  --primary-light: #764ba2;
  --secondary-color: #f093fb;
  --success-color: #4caf50;
  --warning-color: #ff9800;
  --danger-color: #f44336;
  --info-color: #2196f3;
  --dark-color: #2c3e50;
  --light-color: #ecf0f1;
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --text-muted: #bdc3c7;
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-light: #f8f9fa;
  --border-color: #e9ecef;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  --card-bg: var(--bg-primary);
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --primary-rgb: 102, 126, 234;
}

.statistics {
  padding: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--font-family);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--border-color);
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: 1px;
}

h2 {
  margin: 0;
  color: var(--dark-color);
  font-weight: 700;
  font-size: 1.8rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.error-message {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  color: var(--danger-color);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-lg);
  border-left: 4px solid var(--danger-color);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.loading-spinner {
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border-color);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--spacing-md);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.statistics-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.stat-card {
  background: var(--card-bg);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.stat-icon {
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 30px;
  height: 30px;
}

.stat-info h3 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-number {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--dark-color);
  line-height: 1;
}

.recent-section {
  background: var(--card-bg);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

.recent-section h3 {
  margin: 0 0 var(--spacing-lg) 0;
  color: var(--dark-color);
  font-weight: 700;
  font-size: 1.4rem;
}

.empty-state {
  text-align: center;
  padding: var(--spacing-xxl);
  color: var(--text-muted);
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.recent-item {
  padding: var(--spacing-lg);
  background: var(--bg-light);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.recent-item:hover {
  background: white;
  box-shadow: var(--shadow-sm);
}

.qr-info h4 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--dark-color);
  font-weight: 600;
  font-size: 1.1rem;
}

.qr-content {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  word-break: break-all;
}

.qr-date {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .statistics {
    padding: var(--spacing-lg);
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: var(--spacing-lg);
  }
  
  .stat-number {
    font-size: 2rem;
  }
}
</style>